<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>分享收益 - 共享米宝</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    <link rel="stylesheet" href="../assets/css/custom.css">
</head>
<body class="bg-gray-100 text-gray-800">
    <div class="app-container max-w-md mx-auto bg-white min-h-screen relative pb-16">
        <!-- Header -->
        <header class="bg-white sticky top-0 z-10 shadow-sm">
            <div class="flex justify-between items-center p-4">
                <a href="earnings.html" class="text-gray-600">
                    <i class="fas fa-arrow-left"></i>
                </a>
                <h1 class="text-lg font-medium">分享收益</h1>
                <div class="w-5"></div> <!-- Placeholder for balance -->
            </div>
        </header>

        <!-- Main Content -->
        <main>
            <!-- Earnings Summary -->
            <div class="bg-gradient-to-r from-yellow-500 to-yellow-600 text-white p-6">
                <div class="text-center mb-4">
                    <div class="text-sm opacity-80">本月分享收益</div>
                    <div class="text-3xl font-bold mt-1">¥128.75</div>
                </div>
                
                <div class="grid grid-cols-3 gap-4 mt-6">
                    <div class="text-center">
                        <div class="text-sm opacity-80">累计收益</div>
                        <div class="text-xl font-medium mt-1">¥895.20</div>
                    </div>
                    <div class="text-center">
                        <div class="text-sm opacity-80">推荐人数</div>
                        <div class="text-xl font-medium mt-1">32人</div>
                    </div>
                    <div class="text-center">
                        <div class="text-sm opacity-80">分润比例</div>
                        <div class="text-xl font-medium mt-1">5%</div>
                    </div>
                </div>
            </div>

            <!-- Tab Selector -->
            <div class="bg-white border-b">
                <div class="flex">
                    <button id="tab-users" class="flex-1 py-3 font-medium text-yellow-500 border-b-2 border-yellow-500">
                        推荐用户
                    </button>
                    <button id="tab-details" class="flex-1 py-3 font-medium text-gray-500">
                        收益明细
                    </button>
                </div>
            </div>

            <!-- Recommended Users (Tab 1) -->
            <div id="content-users" class="bg-white">
                <!-- User List -->
                <div class="divide-y">
                    <!-- User 1 -->
                    <div class="p-4 user-item" data-user="user1">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mr-3">
                                    <i class="fas fa-user text-gray-400"></i>
                                </div>
                                <div>
                                    <div class="font-medium">李小红</div>
                                    <div class="text-xs text-gray-500">推荐时间: 2023-03-15</div>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-green-600 font-medium">¥35.80</div>
                                <div class="text-xs text-gray-500">贡献收益</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- User 2 -->
                    <div class="p-4 user-item" data-user="user2">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mr-3">
                                    <i class="fas fa-user text-gray-400"></i>
                                </div>
                                <div>
                                    <div class="font-medium">张大明</div>
                                    <div class="text-xs text-gray-500">推荐时间: 2023-04-02</div>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-green-600 font-medium">¥28.40</div>
                                <div class="text-xs text-gray-500">贡献收益</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- User 3 -->
                    <div class="p-4 user-item" data-user="user3">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mr-3">
                                    <i class="fas fa-user text-gray-400"></i>
                                </div>
                                <div>
                                    <div class="font-medium">王小华</div>
                                    <div class="text-xs text-gray-500">推荐时间: 2023-04-18</div>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-green-600 font-medium">¥22.60</div>
                                <div class="text-xs text-gray-500">贡献收益</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Load More -->
                    <div class="p-4 text-center">
                        <button class="text-yellow-500 text-sm font-medium">
                            查看更多
                        </button>
                    </div>
                </div>
            </div>

            <!-- Earnings Details (Tab 2) -->
            <div id="content-details" class="bg-white hidden">
                <div class="divide-y">
                    <!-- Transaction 1 -->
                    <div class="p-4">
                        <div class="flex justify-between items-start">
                            <div>
                                <div class="flex items-center">
                                    <div class="bg-yellow-100 p-1.5 rounded-md mr-3">
                                        <i class="fas fa-plus text-yellow-500 text-xs"></i>
                                    </div>
                                    <div>
                                        <div class="font-medium">分享收益</div>
                                        <div class="text-xs text-gray-500 mt-1">来自: 李小红</div>
                                    </div>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-green-600 font-medium">+¥3.50</div>
                                <div class="text-xs text-gray-500 mt-1">2023-05-18 14:23</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Transaction 2 -->
                    <div class="p-4">
                        <div class="flex justify-between items-start">
                            <div>
                                <div class="flex items-center">
                                    <div class="bg-yellow-100 p-1.5 rounded-md mr-3">
                                        <i class="fas fa-plus text-yellow-500 text-xs"></i>
                                    </div>
                                    <div>
                                        <div class="font-medium">分享收益</div>
                                        <div class="text-xs text-gray-500 mt-1">来自: 张大明</div>
                                    </div>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-green-600 font-medium">+¥2.80</div>
                                <div class="text-xs text-gray-500 mt-1">2023-05-18 12:42</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Transaction 3 -->
                    <div class="p-4">
                        <div class="flex justify-between items-start">
                            <div>
                                <div class="flex items-center">
                                    <div class="bg-yellow-100 p-1.5 rounded-md mr-3">
                                        <i class="fas fa-plus text-yellow-500 text-xs"></i>
                                    </div>
                                    <div>
                                        <div class="font-medium">分享收益</div>
                                        <div class="text-xs text-gray-500 mt-1">来自: 王小华</div>
                                    </div>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-green-600 font-medium">+¥1.90</div>
                                <div class="text-xs text-gray-500 mt-1">2023-05-18 11:05</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Load More -->
                    <div class="p-4 text-center">
                        <button class="text-yellow-500 text-sm font-medium">
                            查看更多
                        </button>
                    </div>
                </div>
            </div>

            <!-- User Contribution Details (Hidden initially) -->
            <div id="user-contribution" class="bg-white hidden">
                <div class="p-4 border-b flex items-center">
                    <button id="back-to-users" class="mr-3 text-gray-600">
                        <i class="fas fa-arrow-left"></i>
                    </button>
                    <h2 class="font-medium" id="user-name">用户贡献明细</h2>
                </div>
                
                <div id="user-details-content" class="divide-y">
                    <!-- User specific transactions will be loaded here -->
                </div>
            </div>

            <!-- Share Your Code Banner -->
            <div class="mx-4 mt-4 mb-8">
                <a href="referral-code.html" class="block bg-gradient-to-r from-yellow-400 to-yellow-600 rounded-lg p-4 text-white flex justify-between items-center">
                    <div>
                        <h3 class="font-semibold">邀请更多好友</h3>
                        <p class="text-sm opacity-90 mt-1">分享您的邀请码，获取更多收益</p>
                    </div>
                    <div class="bg-white/30 rounded-full w-8 h-8 flex items-center justify-center">
                        <i class="fas fa-share-alt text-white"></i>
                    </div>
                </a>
            </div>
        </main>

        <!-- Bottom Navigation -->
        <!-- <nav class="fixed bottom-0 left-0 right-0 bg-white border-t flex justify-around items-center p-2 max-w-md mx-auto">
            <a href="index.html" class="text-center py-1 px-3">
                <i class="fas fa-home text-gray-400 text-xl"></i>
                <div class="text-xs mt-1 text-gray-500">首页</div>
            </a>
            <a href="#" class="text-center py-1 px-3">
                <i class="fas fa-bolt text-gray-400 text-xl"></i>
                <div class="text-xs mt-1 text-gray-500">租借</div>
            </a>
            <a href="#" class="text-center py-1 px-3">
                <i class="fas fa-map-marker-alt text-gray-400 text-xl"></i>
                <div class="text-xs mt-1 text-gray-500">附近</div>
            </a>
            <a href="earnings.html" class="text-center py-1 px-3">
                <i class="fas fa-chart-line text-yellow-500 text-xl"></i>
                <div class="text-xs mt-1 text-yellow-500">收益</div>
            </a>
            <a href="#" class="text-center py-1 px-3">
                <i class="fas fa-user text-gray-400 text-xl"></i>
                <div class="text-xs mt-1 text-gray-500">我的</div>
            </a>
        </nav> -->
    </div>

    <!-- JavaScript for Tabs and User Details -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Tab switching
            const tabUsers = document.getElementById('tab-users');
            const tabDetails = document.getElementById('tab-details');
            const contentUsers = document.getElementById('content-users');
            const contentDetails = document.getElementById('content-details');
            const userContribution = document.getElementById('user-contribution');
            const backToUsers = document.getElementById('back-to-users');
            const userName = document.getElementById('user-name');
            const userDetailsContent = document.getElementById('user-details-content');
            
            // Tab click handlers
            tabUsers.addEventListener('click', function() {
                tabUsers.classList.add('text-yellow-500', 'border-b-2', 'border-yellow-500');
                tabDetails.classList.remove('text-yellow-500', 'border-b-2', 'border-yellow-500');
                tabDetails.classList.add('text-gray-500');
                
                contentUsers.classList.remove('hidden');
                contentDetails.classList.add('hidden');
                userContribution.classList.add('hidden');
            });
            
            tabDetails.addEventListener('click', function() {
                tabDetails.classList.add('text-yellow-500', 'border-b-2', 'border-yellow-500');
                tabUsers.classList.remove('text-yellow-500', 'border-b-2', 'border-yellow-500');
                tabUsers.classList.add('text-gray-500');
                
                contentDetails.classList.remove('hidden');
                contentUsers.classList.add('hidden');
                userContribution.classList.add('hidden');
            });
            
            // User item click handler to show contribution details
            const userItems = document.querySelectorAll('.user-item');
            userItems.forEach(item => {
                item.addEventListener('click', function() {
                    const userId = this.getAttribute('data-user');
                    const name = this.querySelector('.font-medium').textContent;
                    
                    // Update user name in the details view
                    userName.textContent = name + ' 的贡献明细';
                    
                    // Load user specific transaction details
                    loadUserTransactions(userId, name);
                    
                    // Show user contribution view
                    contentUsers.classList.add('hidden');
                    contentDetails.classList.add('hidden');
                    userContribution.classList.remove('hidden');
                });
            });
            
            // Back button to return to users list
            backToUsers.addEventListener('click', function() {
                userContribution.classList.add('hidden');
                contentUsers.classList.remove('hidden');
                
                // Restore tab appearance
                tabUsers.classList.add('text-yellow-500', 'border-b-2', 'border-yellow-500');
                tabDetails.classList.remove('text-yellow-500', 'border-b-2', 'border-yellow-500');
                tabDetails.classList.add('text-gray-500');
            });
            
            // Function to load user specific transactions
            function loadUserTransactions(userId, name) {
                // Clear previous content
                userDetailsContent.innerHTML = '';
                
                // Demo data - in a real app this would come from an API
                const transactions = {
                    user1: [
                        { date: '2023-05-18 14:23', amount: '3.50' },
                        { date: '2023-05-16 09:12', amount: '2.80' },
                        { date: '2023-05-15 17:45', amount: '4.20' }
                    ],
                    user2: [
                        { date: '2023-05-17 11:33', amount: '2.80' },
                        { date: '2023-05-14 15:22', amount: '3.10' },
                        { date: '2023-05-12 10:18', amount: '2.60' }
                    ],
                    user3: [
                        { date: '2023-05-18 11:05', amount: '1.90' },
                        { date: '2023-05-15 13:48', amount: '2.30' },
                        { date: '2023-05-11 16:29', amount: '3.40' }
                    ]
                };
                
                // Create transaction elements
                const userTrans = transactions[userId] || [];
                userTrans.forEach(trans => {
                    const transElement = document.createElement('div');
                    transElement.className = 'p-4';
                    transElement.innerHTML = `
                        <div class="flex justify-between items-start">
                            <div>
                                <div class="flex items-center">
                                    <div class="bg-yellow-100 p-1.5 rounded-md mr-3">
                                        <i class="fas fa-plus text-yellow-500 text-xs"></i>
                                    </div>
                                    <div>
                                        <div class="font-medium">分享收益</div>
                                        <div class="text-xs text-gray-500 mt-1">来自: ${name}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-green-600 font-medium">+¥${trans.amount}</div>
                                <div class="text-xs text-gray-500 mt-1">${trans.date}</div>
                            </div>
                        </div>
                    `;
                    userDetailsContent.appendChild(transElement);
                });
                
                // Add "Load More" button if needed
                if (userTrans.length > 0) {
                    const loadMoreElement = document.createElement('div');
                    loadMoreElement.className = 'p-4 text-center';
                    loadMoreElement.innerHTML = `
                        <button class="text-yellow-500 text-sm font-medium">
                            查看更多
                        </button>
                    `;
                    userDetailsContent.appendChild(loadMoreElement);
                }
            }
        });
    </script>
</body>
</html> 